<!DOCTYPE html>
<html>
<head>
    <title>Basic usage</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
            <ul id="dairy">
            <li>
                <img src="../content/shared/images/foods/200/12.jpg" alt="Queso Manchego La Pastora" />
                <span id="manchego"></span>
            </li>
            <li>
                <img src="../content/shared/images/foods/200/32.jpg" alt="Mascarpone Fabioli" />
                <span id="mascarpone"></span>
            </li>
            <li>
                <img src="../content/shared/images/foods/200/72.jpg" alt="Gudbrandsdalsost" />
                <span id="gudbrands"></span>
            </li>
        </ul>
        <script>
            $(document).ready(function () {
                $("#manchego").kendoBarcode({
                    value: "2346722",
                    type: "ean8",
                    width: 280,
                    height: 100
                });
                $("#mascarpone").kendoBarcode({
                    value: "Mascarpone",
                    type: "code128",
                    width: 280,
                    height: 100
                });
                $("#gudbrands").kendoBarcode({
                    value: "CHEESE",
                    type: "code39",
                    width: 280,
                    height: 100
                });
            });
        </script>
        <style scoped>
            #dairy {
                margin: 0 auto;
                width: 950px;
                padding: 30px 25px;
                list-style-type: none;
            }
            #dairy li {
                display: inline-block;
                padding: 10px;
                margin: 6px;
                background-color: #fff;
                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
                -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
                -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            }
            #dairy li span, #dairy li img {
                margin: 0;
                padding: 0;
            }
            #dairy li img {
                margin: 40px;
            }
        </style>



    
    
</body>
</html>
